<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Music Player</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css" />
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-image: linear-gradient(0deg,
                    rgba(247, 247, 247, 1) 23.8%,
                    rgba(252, 221, 221, 1) 92%);
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: 'Lato', sans-serif;
            margin: 0;
        }

        .music-container {
            background-color: #fff;
            border-radius: 15px;
            box-shadow: 0 20px 20px 0 rgba(252, 169, 169, 0.6);
            display: flex;
            padding: 20px 30px;
            position: relative;
            margin: 100px 0;
            z-index: 10;
        }

        .img-container {
            position: relative;
            width: 110px;
            /* background-color: pink; */
        }

        .img-container::after {
            content: '';
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            bottom: 100%;
            /* top: -10px; */
            left: 50%;
            transform: translate(-50%, 50%);
        }

        .img-container img {
            border-radius: 50%;
            object-fit: cover;
            height: 110px;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            animation: rotate 3s linear infinite;
            animation-play-state: paused;
        }

        .music-container.play .img-container img {
            animation-play-state: running;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        .navigation {
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1;
        }

        .action-btn {
            background-color: #fff;
            border: 0;
            color: #dfdbdf;
            font-size: 20px;
            cursor: pointer;
            padding: 10px;
            margin: 0 20px;
        }

        .action-btn.action-btn-big {
            color: #cdc2d0;
            font-size: 30px;
        }

        .action-btn:focus {
            outline: 0;
        }

        .music-info {
            background-color: rgba(255, 255, 255, 0.5);
            border-radius: 15px 15px 0 0;
            position: absolute;
            top: 0;
            left: 20px;
            width: calc(100% - 40px);
            padding: 10px 10px 10px 150px;
            opacity: 0;
            transform: translateY(0%);
            transition: transform 0.3s ease-in, opacity 0.3s ease-in;
            z-index: 0;
        }


        .music-container.play .music-info {
            opacity: 1;
            transform: translateY(-100%);
        }

        .music-info h4 {
            margin: 0;
        }

        .progress-container {
            background: #fff;
            border-radius: 5px;
            cursor: pointer;
            margin: 10px 0;
            height: 4px;
            width: 100%;
        }

        .progress {
            background-color: #fe8daa;
            border-radius: 5px;
            height: 100%;
            width: 0%;
            transition: width 0.1s linear;
        }
    </style>
</head>

<body>
    <h1>Music Player</h1>

    <div class="music-container" id="music-container">
        <div class="music-info">
            <h4 id="title"></h4>
            <div class="progress-container" id="progress-container">
                <div class="progress" id="progress"></div>
            </div>
        </div>

        <audio src="music/ukulele.mp3" id="audio"></audio>

        <div class="img-container">
            <img src="images/ukulele.jpg" alt="music-cover" id="cover" />
        </div>
        <div class="navigation">
            <button id="prev" class="action-btn">
                <i class="fas fa-backward"></i>
            </button>
            <button id="play" class="action-btn action-btn-big">
                <i class="fas fa-play"></i>
            </button>
            <button id="next" class="action-btn">
                <i class="fas fa-forward"></i>
            </button>
        </div>
    </div>
</body>
<script>
    var musicContainer = document.querySelector('.music-container')
    var playBtn = document.querySelector('#play')
    var prevBtn = document.querySelector('#prev')
    var nextBtn = document.querySelector('#next')
    var audio = document.querySelector('audio')
    var progress = document.getElementById("progress")

    // 状态切换 (暂停和启动)
    playBtn.onclick = function () {
        var isPlaying = musicContainer.classList.contains('play')
        if (isPlaying) { // 已经播放 => 改为暂停
            musicContainer.classList.remove('play');

            playBtn.querySelector('i.fas').classList.remove('fa-pause')
            playBtn.querySelector('i.fas').classList.add('fa-play')

            audio.pause()  // 音频暂停

        } else { // 没有播放 -> 变成播放
            // playsong()

            musicContainer.classList.add('play');

            playBtn.querySelector('i.fas').classList.remove('fa-play')
            playBtn.querySelector('i.fas').classList.add('fa-pause')

            audio.play()   // 音频播放


        }
    }
    var songs = [`hey`, `summer`, `ukulele`]
    var index = 0
    var title = document.querySelector('#title')
    var cover = document.querySelector('#cover')

    // 默认加载第一首 (图片/和歌曲)
    load(songs[index])
    function load(song) {
        title.innerHTML = song
        cover.src = `images/${song}.jpg` 
        audio.src = `music/${song}.mp3`
    }

    // 上一曲 / 下一曲
    nextBtn.onclick = function () {
        index++;
        if (index > songs.length - 1) {
            index = 0
        }
        load(songs[index])
        playsong()
    }
    prevBtn.onclick = function () {
        index--;
        if (index < 0) {
            index = songs.length - 1
        }
        load(songs[index])
        playsong()
    }


    function playsong() {
        musicContainer.classList.add('play');

        playBtn.querySelector('i.fas').classList.remove('fa-play')
        playBtn.querySelector('i.fas').classList.add('fa-pause')
        audio.play()
    }

    // 进度条
    audio.ontimeupdate = function (e) {
        console.log(e.target.currentTime);
        // let { duration, currentTime } = e.target; // audio
    
        let progressPercent = (audio.currentTime / audio.duration) * 100
        progress.style.width = `${progressPercent}%`;
    }

</script>

</html>